<template>
  <div class="h-1/1">
    <div class="bg-[var(--el-bg-color)] p-[15px] flex flex-row justify-between">
      <div class="flex flex-col justify-center">
        <p class="text-[22px] font-bold rounded-[15px] select-none">小程序页面</p>
      </div>
      <div class="flex flex-col justify-center">
        <el-button type="primary" @click="save" v-auth="'添加'">保存</el-button>
      </div>
    </div>
    <div class="bg-[var(--el-bg-color)] h-1/1 rounded-[15px] p-[20px] flex mt-[20px]">
      <div>
        <div>
          <p class="font-bold">轮播图设置</p>
        </div>
        <div class="w-[330px] overflow-hidden rounded-[15px] mt-[20px]">
          <el-carousel class="bg-[#d3dce6]" height="178px">
            <el-carousel-item v-for="(p, index) in swiperList" :key="index">
              <el-image class="w-1/1 h-1/1" fit="scale-down" :src="url(prefix, p.url)"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="ml-[30px] pt-[50px]">
        <p class="text-[#999] text-[14px]">建议尺寸：330 * 178px，拖拽图片可调整图片顺序哦，最多添加五张。</p>
        <div class="mt-[20px]">
          <el-button type="primary" @click="add">添加图片</el-button>
        </div>
        <div class="mt-[20px]">
          <draggable v-model="swiperList" item-key="uuid" chosenClass="can-move" animation="300">
            <template #item="{ element }">
              <div :class="['border-[1px] border-[#999] border-solid p-[10px] flex flex-row w-[400px] mt-[20px]']">
                <div class="flex flex-col justify-center cursor-move can-move">
                  <el-image src="./drag.png" class="w-[24px]"></el-image>
                </div>
                <ChooseFile v-model:url="element.url" :width="165" :height="89" fileType="image"></ChooseFile>
                <div class="ml-[20px] relative">
                  <div class="flex flex-row">
                    <div class="flex flex-col justify-center mr-[10px]">
                      <span class="text-[14px] whitespace-nowrap">跳转地址</span>
                    </div>
                    <el-input v-model="element.link"> </el-input>
                  </div>
                  <div class="absolute bottom-0 right-0">
                    <el-button type="primary" @click="deleteItem(element.uuid)">移除</el-button>
                  </div>
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { url, generateUUID } from "@/utils/index";
import draggable from "vuedraggable";
import ChooseFile from "@/components/ChooseFile/index.vue";
import { getSwiper, addSwiper as addSwiperApi } from "@/api/modules/home_swiper";
import { ElMessage } from "element-plus";
const {
  userInfo: { prefix }
} = useUserStore();
interface Swiper {
  url: string;
  link: string;
  uuid: string;
  type: number;
}
const swiperList = ref<Swiper[]>([]);
const add = () => {
  if (swiperList.value.length >= 5) {
    swiperList.value.shift();
  }
  swiperList.value.push({ uuid: generateUUID(), url: "", link: "", type: 2 });
};
// 删除
const deleteItem = (uuid: any) => {
  const index = swiperList.value.findIndex((e: any) => e.uuid === uuid);
  swiperList.value.splice(index, 1);
};
// 保存
const save = async () => {
  try {
    await addSwiperApi(swiperList.value);
    ElMessage.success("成功");
    list();
  } catch (error) {}
};

const list = async () => {
  try {
    const { data } = await getSwiper(2);
    swiperList.value = data as any;
  } catch (error) {}
};

onBeforeMount(() => {
  list();
});
</script>

<style></style>
